<script setup lang="ts">
import { computed, unref } from "vue";

import { timeGroupArr } from "@/utils/times";
interface Props {
  item: FormOption;
  modelValue: any;
}
const props = defineProps<Props>();
const emits = defineEmits(["update:modelValue", "onSearch"]);
// 绑定属性
const bindProps = () => {
  let { prop, element, initValue, rules, events, ...arg } = props.item;
  if (element === "select") {
    delete arg.options;
  }
  if (events) {
    // vue3 方法全为 bind
    arg = { ...events, ...arg };
  }
  console.log(arg);
  return arg;
};

const currentVal = computed({
  get() {
    return unref(props.modelValue);
  },
  set(val) {
    emits("update:modelValue", val);
  },
});

const clearInput = () => {
  emits("onSearch");
};

const handleFilter = () => {
  emits("onSearch");
};

// 绑定方法
const bindEvents = () => {
  return props.item.events || {};
};
const handleFilterRadio = (e: any) => {
  console.log(e);
  if (currentVal.value == e) {
    currentVal.value = "";
  } else {
    currentVal.value = e;
  }
  emits("onSearch");
};

const timePicker = (val: any) => {
  // 由于el-radio 组件默认有点击事件，会导致触发2次，所以需要阻止默认得点击事件，自定义事件
  if (currentVal.value && currentVal.value.join("") == val.join("")) {
    currentVal.value = null;
  } else {
    currentVal.value = val;
  }
  emits("onSearch");
};
const defaultTime2: [Date, Date] = [
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
];
</script>

<template>
  <el-input
    :maxlength="200"
    v-if="item.element === 'input'"
    v-model.trim="currentVal"
    clearable
    v-bind="bindProps()"
    style="width: 180px"
    :placeholder="item.placeholder || '请输入' + item.label"
    @clear="clearInput"
    @keyup.enter.native="handleFilter()"
  />

  <el-radio-group
    v-model="currentVal"
    class="radiogroup"
    v-if="item.element === 'date-picker' && !item.noquick"
    @change="handleFilter"
  >
    <el-radio-button
      :label="item.value"
      v-for="(item, index) in timeGroupArr()"
      :key="index"
      @click.native.prevent="timePicker(item.value)"
    >
      {{ item.label }}
    </el-radio-button>
  </el-radio-group>

  <el-date-picker
    :maxlength="200"
    v-if="item.element === 'picker'"
    v-model.trim="currentVal"
    clearable
    type="date"
    v-bind="bindProps()"
    style="width: 180px"
    :placeholder="item.placeholder || '请输入' + item.label"
    @clear="clearInput"
    @change="handleFilter"
    @keyup.enter.native="handleFilter()"
  />

  <el-date-picker
    :maxlength="200"
    v-if="item.element === 'month'"
    v-model.trim="currentVal"
    clearable
    type="month"
    v-bind="bindProps()"
    style="width: 180px"
    :placeholder="item.placeholder || '请输入' + item.label"
    @clear="clearInput"
    @change="handleFilter"
    @keyup.enter.native="handleFilter()"
  />
  <el-date-picker
    v-if="item.element === 'date-picker'"
    v-model="currentVal"
    type="datetimerange"
    ref="datepicker"
    clearable
    start-placeholder="开始时间"
    range-separator="至"
    end-placeholder="结束时间"
    value-format="YYYY-MM-DD HH:mm:ss"
    @change="handleFilter"
    v-bind="bindProps()"
    :default-time="defaultTime2"
  />
  <el-radio-group
    v-model="currentVal"
    v-if="item.element === 'radiogroup'"
    v-bind="bindProps()"
    @change="handleFilter"
    size="small"
  >
    <el-radio-button
      @click.native.prevent="handleFilterRadio(v.value)"
      v-for="v in item.options"
      :key="v.value"
      :label="v.value"
    >
      {{ v.label }}
    </el-radio-button>
  </el-radio-group>

  <el-select
    v-if="item.element === 'select'"
    v-model="currentVal"
    v-bind="bindProps()"
    clearable
    @change="handleFilter"
  >
    <el-option
      v-for="v in item.options"
      :key="v.value"
      :label="v.label"
      :value="v.value"
    />
  </el-select>

  <el-select
    v-if="item.element === 'selectDict'"
    v-model="currentVal"
    v-bind="bindProps()"
    :clearable="!item.noclearable"
    @change="handleFilter"
  >
    <el-option
      v-for="v in item.options"
      :key="v.dictKey"
      :label="v.dictLabel"
      :value="v.dictKey"
    />
  </el-select>
  <el-checkbox
    @change="handleFilter"
    v-if="item.element === 'checkboxOne'"
    v-model="currentVal"
  />
</template>

<style lang="scss" scoped>
.radiogroup {
  ::v-deep {
    .el-radio-group {
      &:nth-child(n + 2) {
        .el-radio-button__inner {
          border-radius: 0 !important;
        }
      }

      &:nth-child(1) {
        .el-radio-button__inner {
          border-radius: 5px 0 0 5px !important;
        }
      }

      &:last-child {
        .el-radio-button__inner {
          border-radius: 0 0 0 0 !important;
        }
      }
    }

    .el-radio-button__inner {
      padding: 8px 9px;
    }
  }
}
</style>
